<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h3 {
            padding: 20px 10px;
        }

        li {
            list-style: none;
        }

        .list li {
            line-height: 45px;
            text-indent: 10px;
            border: 1px solid #333;
        }

        .list li+li {
            border-top: 0;
        }

        .buttonGroup {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <h3 id="title">批量操作元素</h3>
        <div class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </div>
    </div>
    <div class="buttonGroup">
        <button class="setHtml">
            设置html
        </button>
        <button class="getHtml">
            获取html
        </button>
        <button class="hide">隐藏</button>
        <button class="show">显示</button>
        <button class="setWidth">
            设置宽度
        </button>
        <button class="getWidth">
            获取宽度
        </button>
        <button class="attr">attr</button>
        <button class="prop">prop</button>
        <button class="css">css</button>
        <button class="addClass">addClass</button>
        <button class="removeClass">removeClass</button>
        <button class="eq">eq</button>
        <button class="siblings">siblings</button>
        <button class="chain">链式操作</button>
    </div>
</body>
<script>
    function GetEle(selector){
        this.eles = document.querySelectorAll(selector);
    }
    GetEle.prototype.html = function(con){
        if(arguments.length >= 1){
            this.each(function(ele, index){
                ele.innerHTML = con;
            })
        }else{
            return this.eles[0].innerHTML;
        }
    }
    /* GetEle.prototype.get = function(){
        alert()
    } */
    GetEle.prototype.text = function(con){
        if(arguments.length >= 1){
            this.each(function(ele,index){
                ele.innerText = con
            })
        }else{
            return this.eles[0].innerText;
        }
    }
    GetEle.prototype.val = function(con){
        if(arguments.length >= 1){
            this.each(function(ele,index){
                ele.value = con
            })
        }else{
            return this.eles[0].value;
        }
    }
    GetEle.prototype.hide = function(){
        this.each(function(ele,index){
            ele.style.display = "none";
        })
    }
    GetEle.prototype.show = function(){
        this.each(function(ele,index){
            ele.style.display = "block";
        })
    }
    GetEle.prototype.addClass = function(classCon){
        if(arguments.length >= 1){
            var list = classCon.split(/\s/g);
            this.each(function(ele){
                ele.classList.add(...list);
            })
        }
    }
    GetEle.prototype.removeClass = function(classCon){
        if(arguments.length >= 1){
            var list = classCon.split(/\s/g);
            this.each(function(ele){
                ele.classList.remove(...list);
            })
        }
    }
    GetEle.prototype.each = function(fn){
        for(var i = 0 ; i < this.eles.length ; i++){
            var ele = this.eles[i];
            var index = i;
            fn.call(ele , ele , index);
        }
    }
    GetEle.prototype.on = function(eventType, fn){
        // this -> 调用此方法的实例化对象  {eles:[]}
        // for (var i = 0; i < this.eles.length; i++) {
        //     var ele = this.eles[i];
        //     var index = i;
        //     try {
        //         ele.addEventListener(eventType, fn);
        //     } catch (err) {
        //         ele.attachEvent("on" + eventType, fn);
        //     }
        // }
        this.each(function (ele) {
            try {
                ele.addEventListener(eventType, fn);
            } catch (err) {
                ele.attachEvent("on" + eventType, fn);
            }
        })
    }
    GetEle.prototype.click = function(fn){
        this.on("click", fn);
    }
    function $(selector){
        return new GetEle(selector);
    }
    
    $(".setHtml").click(function(){
        $(".list li").html("65646");
    });

    $(".hide").click(function(){
        $(".list li").hide();
    });

    $(".show").click(function(){
        $(".list li").show();
    })

    $(".addClass").click(function(){
        $(".list li ").addClass("one 89 666")
    })

    $(".removeClass").click(function(){
        $(".list li ").removeClass("one 89 666")
    })
</script>
</html>